<template>
  <div class="leftTree">
    <el-input  v-model="name" placeholder="输入部门名称搜索" size="mini" class="mb-[10px]" @input="changeName"></el-input>
    <el-tree
      :props="props"
      :load="loadNode"
      lazy
      :data="data"
      :expand-on-click-node="false"
      @node-click="handleNodeClick"
    >
    </el-tree>
    <fullScreen></fullScreen>
  </div>
</template>

<script>
import { getDept } from '@/api/dept'
import { mapState, mapMutations } from 'vuex'
import { UPDATE_DEPTID } from '@/const'
import _ from 'lodash'
export default {
  name: 'leftTree',
  components: {},
  data () {
    return {
      name: '',
      props: {
        label: 'name',
        isLeaf: 'leaf'
      },
      data: []
    }
  },
  // 计算属性
  computed: {
    ...mapState('user', ['deptld'])
  },
  watch: {},
  mounted () {
    // el-input__inner
    // console.log(this.$store.state.user.deptld)
  },
  methods: {
    ...mapMutations('user', [UPDATE_DEPTID]),
    handleNodeClick (data) {
      this[UPDATE_DEPTID](data.id)
    },
    async loadNode (node, resolve) {
      const { data: { content } } = await getDept({ pid: node?.data?.id })
      !node.data ? resolve(content) : setTimeout(() => {
        resolve(content)
      }, 200)
    },
    changeName: _.debounce(async function () {
      const { data: { content } } = await getDept(this.name && { name: this.name })
      this.data = content
    }, 1000)
  }
}
</script>

<style lang="scss" scoped>

</style>
